<!DOCTYPE HTML>
<html>
<head>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
	<style>
		#title{
			 font-family: "Inter", sans-serif;
  			 font-optical-sizing: auto;
  			 font-weight: <weight>;
  			 font-style: normal;
  			 font-variation-settings:
  			 "slnt" 0;
		}
		*{margin: 0; padding: 0;}
		body{
			width: 960px;
			margin: 0 auto;
			font-family: 'Times New Roman', serif;
		}
		li{list-style: none;}
		a{text-decoration: none;}
		img{border: 0;}
		#main-header{
			width: 960px; height: 160px;
			margin: 0 auto;
			position: relative;
		}
		#main-header>#title{
			position: absolute;
			right: 20px;
			top: 30px;
		}
		#main-header>nav{
			position: absolute;
			left: 0;
			bottom: 0;
		}
		nav > ul{
			overflow: hidden;

		}
		nav	> ul > li{
			float: left;
			list-style: none;
		}
		nav > ul > li > a{
			display: block;
			width: 100px;
			height: 20px;
			padding: 10px;
			text-align: center;
			line-height: 20px;
			border: 1px solid blue;
		}
		nav > ul > li > a:hover{
			background: black;
			color: white;
		}
		nav > ul > li:first-child > a{
			border-radius: 15px 0 0 15px;
		}
		nav > ul > li:last-child > a{
			border-radius: 0 15px 15px 0;
		}
		#content{
			width: 960px;
			margin: 0 auto;
		}
		section{
			width: 720px;
			float: left;
		}
		#fbox{
			width: 300px;
			height: 200px;
			background: red;
			position: fixed;
			left: 30%;
			top: 20%;
			margin-top: 120px;
		}
		section.tab-title{overflow: hidden;}
		section.tab-title>label{
			display: block;
			float: left;
			width: 100px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			border:1px solid black;

			background: black;
			color: white;
		}
		.item{
			overflow: hidden;
			width: 182px;
			padding: 10px;
			border: 1px solid black;
			border-top: none;
		}
		.thumbnail{float: left;}
		.description{
			float: left;
			margin-left: 10px;
		}
		.description>strong{
			display: block;
			width: 120px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		aside{
			width: 230px;
			float: right;
		}
		input:nth-of-type(1){display: none;}
		input:nth-of-type(1)~div:nth-of-type(1){display: none;}
		input:nth-of-type(1):checked~div:nth-of-type(1){display: block;}
		input:nth-of-type(2){display: none;}
		input:nth-of-type(2)~div:nth-of-type(2){display: none;}
		input:nth-of-type(2):checked~div:nth-of-type(2){display: block;}
		input:nth-of-type(1):checked~section.tab-title>label:nth-of-type(1){
			background: white;
			color: black;
		}
		input:nth-of-type(2):checked~section.tab-title>label:nth-of-type(2){
			background: white;
			color: black;
		}
	</style>
</head>
<body>
	<header id="main-header">
		<div id="title">
			<h1> Weekly Hot Issues </h1>
		</div>
		<nav>
			<ul>
				<li><a href="#">영화</a></li>
				<li><a href="#">드라마</a></li>
				<li><a href="#">TV 예능</a></li>
				<li><a href="#">다큐멘터리</a></li>
				<li><a href="#">뉴스</a></li>
			</ul>
		</nav>
	</header>
	<div id="content">
		<section>
			<div id="fbox">
				
			</div>
		</section>
		<aside>
			<input id="song" type="radio" name="tab" checked = checked>
			<input id="movie" type="radio" name="tab">
			<section class="tab-title">
				<label for="song">Song Top 5</label>
				<label for="movie">Movie Top 5</label>
			</section>
				<div class="tab-item">
					<ul>
						<li class="item">
							<a href="#">
								<div class="thumbnail">
									<img src="http://placehold.it/45X45">
								</div>
								<div class="description">
									<strong>처음엔 사랑이란게</strong>
								</div>
						</li>
						<li class="item">
							<a href="#">
								<div class="thumbnail">
									<img src="http://placehold.it/45X45">
								</div>
								<div class="description">
									<strong>가꾸로 강을 거슬러 오르는 저 힘찬 연어들처럼</strong>
								</div>
						</li>
						<li class="item">
							<a href="#">
								<div class="thumbnail">
									<img src="http://placehold.it/45X45">
								</div>
								<div class="description">
									<strong>사랑은 늘 도망가</strong>
								</div>
						</li>
						<li class="item">
							<a href="#">
								<div class="thumbnail">
									<img src="http://placehold.it/45X45">
								</div>
								<div class="description">
									<strong>건물 사이에 피어난 장미</strong>
								</div>
						</li>
						<li class="item">
							<a href="#">
								<div class="thumbnail">
									<img src="http://placehold.it/45X45">
								</div>
								<div class="description">
									<strong>잠깐 시간 될까(Ordinary Confession)</strong>
								</div>
						</li>
					</ul>
				</div>
				<div class="tab-item">
					<ul>
						<li class="item">
							<a href="#">
								<div class="thumbnail">
									<img src="http://placehold.it/45X45">
								</div>
								<div class="description">
									<strong>노량 죽음의바다</strong>
								</div>
						</li>
						<li class="item">
							<a href="#">
								<div class="thumbnail">
									<img src="http://placehold.it/45X45">
								</div>
								<div class="description">
									<strong>명량</strong>
								</div>
						</li>
						<li class="item">
							<a href="#">
								<div class="thumbnail">
									<img src="http://placehold.it/45X45">
								</div>
								<div class="description">
									<strong>서울의 봄</strong>
								</div>
						</li>
						<li class="item">
							<a href="#">
								<div class="thumbnail">
									<img src="http://placehold.it/45X45">
								</div>
								<div class="description">
									<strong>화이</strong>
								</div>
						</li>
						<li class="item">
							<a href="#">
								<div class="thumbnail">
									<img src="http://placehold.it/45X45">
								</div>
								<div class="description">
									<strong>스파이</strong>
								</div>
						</li>
					</ul>
				</div>
		</aside>
	</div>
	<footer>
		
	</footer>
</body>
</html>